<template>
	<div class="padding-across-10" v-loading.fullscreen.lock="loading" element-loading-text="拼命加载中">
		<headerOpreate :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
		<div style="width: 100%">
			<div style="padding-left: 3px;float: left">
				<span style="font-size: 13px;font-weight: bold">检索字段</span>
				<el-select size="small" v-model="value" :placeholder="$t('message.selectModeAlert')" style="width: 100px;margin-right: 2px">
					<el-option label="图书名称" :value="0"></el-option>
					<el-option label="图书条码" :value="1"></el-option>
					<el-option label="读者姓名" :value="2"></el-option>
					<el-option label="读者证号" :value="3"></el-option>
				</el-select>
				<span style="font-size: 13px;font-weight: bold">关键字</span>
				<el-input size="small" style="width: 160px;" v-model="searchModel" placeholder="检索字段关键字">
					<el-button id="searchPreviewData" slot="append" icon="search" @click="getDatas"></el-button>
				</el-input>
				<span style="font-size: 13px;font-weight: bold">状态</span>
				<el-select size="small" v-model="status" :placeholder="$t('message.selectModeAlert')" style="width: 100px;margin-right: 2px" @change="selectType">
					<el-option label="全部" :value="0"></el-option>
					<el-option label="有效" :value="1"></el-option>
					<el-option label="无效" :value="-1"></el-option>
				</el-select>
			</div>
			<div class="block" style="text-align:right;">
				<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[10,20,30,40,50]" layout="total,sizes, prev, pager, next, jumper" :total="totalSize">
				</el-pagination>
			</div>
		</div>
		<el-table border style="width: 100%;" @selection-change="handleSelectionChange" :data="tableData">
			<el-table-column :show-overflow-tooltip="true" type="index" align="center"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="读者姓名" align="center" prop="readername"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="读者证号" align="center" prop="readercode"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="预借图书" align="center" prop="bookname"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="图书条码" align="center" prop="bookbarcode"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="预借时间" align="center" prop="preborrowtime"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="到期时间" align="center" prop="canceltime"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="状态" align="center">
				<template slot-scope="scope">
					<el-tag type="success" v-if="scope.row.isvalid">有效</el-tag>
					<el-tag type="danger" v-else>无效</el-tag>
				</template>
			</el-table-column>
			<!-- <el-table-column :show-overflow-tooltip="true" label="预借位置" align="center">
				<template slot-scope="scope">
					<span v-if="scope.row.sn != ''">{{scope.row.sn}}(设备)</span>
					<span v-if="scope.row.location != ''">{{scope.row.location}}(馆藏地)</span>
				</template>
			</el-table-column> -->
			<el-table-column :show-overflow-tooltip="true" :label="$t('message.operation')" align="center">
				<template slot-scope="scope">
					<el-button type="primary" size="small" @click="cancelPreview(scope.row)"><i class="el-icon-eleg-icon_close_alt el-icon--left"></i>取消</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="block" style="text-align:right;margin-bottom:100px;">
			<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[10,20,30,40,50]" layout="total,sizes, prev, pager, next, jumper" :total="totalSize">
			</el-pagination>
		</div>
	</div>
</template>
<script>
	import $ from 'jquery'
	import { GloabFun,HttpServer } from '../../../../../assets/js/common.js'
	import headerOpreate from '../../../../../components/headerOpreate'
	let id = 1000;
	export default {
		components: {
			headerOpreate
		},
		data() {
			//回车触发查询按钮
			document.onkeydown = function(event) {
				var e = event || window.event;
				if(e && e.keyCode == 13) { //回车键的键值为13
					$("#searchPreviewData").click(); //调用登录按钮的登录事件
				}
			};
			return {
				searchPreviewHistory: [],
				item: {},
				isReload: false,
				loading: false,
				value: 0,
				searchModel: '',
				searchReaderPreHistory: [],
				rank: 0,
				tableData: [],
				multipleSelection: [],
				status: 0,
				currentPage: 1,
				pageSize: 10,
				totalSize: 0,
				showUpdate: false,
				opreateDatas: [{
					size: "small",
					type: 'primary',
					icon: 'el-icon-eleg-icon_refresh el-icon--left',
					name: '刷新',
					action: 'reloadDatas'
				}]
			}
		},
		props: {
			subArgs: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},

			handleCurrentChange(val) {
				this.currentPage = val;
				this.getDatas();
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.getDatas();
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			selectType() {
				this.getDatas();
			},
			//取消预借
			cancelPreview(row) {
				this.$confirm('此操作将取消该预借记录，是否继续？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					var deleteParam = {
						code: row.readercode,
						barcode: [row.bookbarcode],
						sn: " ",
					}
					HttpServer.httpPost.call(this, '/Api/Reader/Preborrow/Cancel', deleteParam, function(response) {}, function(response) {
						if(response.data.code === 0) {
							this.getDatas();
							this.$notify({
								title: '成功',
								message: '取消预借成功',
								type: 'success',
								duration: 2500
							});
						} else {
							this.getDatas();
							this.$notify.error({
								title: '错误',
								message: response.data.msg,
								duration: 2500
							});
						}
					});
				}).catch(() => {
					this.$notify.info({
						title: '消息',
						message: this.$t('message.operationCanceled'),
						duration: 2500
					})
				})
			},
			//刷新
			reloadDatas() {
				this.isReload = true;
				this.getDatas();
			},
			getDatas() {
				this.loading = true;
				var param = {
					barcode: this.value === 1 ? this.searchModel : '',
					bookname: this.value === 0 ? this.searchModel : '',
					readername: this.value === 2 ? this.searchModel : '',
					readercode: this.value === 3 ? this.searchModel : '',
					index: this.currentPage,
					pagesize: this.pageSize,
					qshowtype: this.status,
					UserId: parseInt(GloabFun.getKeyId())
				}
				HttpServer.httpPost.call(this, '/Api/Reader/Preborrow/Info/All',param, function(response) {}, function(response) {
					this.loading = false;
					if(response.data.code === 0) {
						this.tableData = response.data.info;
						this.totalSize = response.data.totalcount;
						if(this.isReload){
							this.$notify({
								title: '成功',
								message: this.$t('message.refreshSuccess'),
								type: 'success',
								duration: 2500
							});
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
					this.isReload = false;
				});
			},
		},
		created() {
			this.getDatas();
		}
	}
</script>
<style scoped>
	@import '../../../../../assets/css/font-awesome-4.7.0/css/font-awesome.css';
</style>
<style scoped lang="less">
	.name {
		color: #20a0ff;
	}
	
	.flex-inline {
		display: flex;
		justify-content: space-between;
		.query {
			display: flex;
		}
	}
	
	.edit-mission {
		padding-top: 50px;
		.el-dialog__header {
			background-color: #000;
		}
		.el-dialog__body {
			position: relative;
		}
		.clearfloat {
			height: 100px;
			max-height: 150px;
		}
	}
</style>